<template>
  <div class="app-container">
      <!-- 条件查询 -->
           <div>
              <el-form ref="mytext" :inline="true" :model="mytext" label-width="80px" class="demo-form-inline">

                     <el-form-item label="姓名" size="mini">
                       <el-input v-model="mytext.name"></el-input>
                     </el-form-item>
                     <el-form-item label="电话" size="mini">
                       <el-input v-model="mytext.tel"></el-input>
                     </el-form-item>
                     <el-form-item>

                     <el-button type="primary" icon="el-icon-search" size="mini"  @click="selectWhere">查询</el-button>


                       <el-button type="warning" size="mini">取消</el-button>
                     </el-form-item>
                   </el-form>
           </div>
           <!-- 添加按钮 -->
           <div>
              <el-button type="success" @click="add" size="small"> 添加</el-button>
           </div>
     <!-- 列表渲染 -->
      <div>
             <el-table :data="tableData" style="width: 100%">
               <el-table-column type='index' label="序号"  width="80">
               </el-table-column>
                  <el-table-column  prop="name" label="姓名">
                  </el-table-column>
                  <el-table-column prop="tel" label="电话">
                  </el-table-column>
                  <el-table-column prop="address" label="地址">
                  </el-table-column>
                  <el-table-column  prop="desc" label="备注">
                  </el-table-column>
                   <el-table-column  label="操作">
                     <teleport slot-scope='scope'>
                        <el-button type="primary" icon="el-icon-edit" @click="update(scope.row)" size="small">修改</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.row.id)">删除</el-button>
                     </teleport>

                   </el-table-column>
                </el-table>
          </div>
     <!-- 分页插件 -->
          <el-pagination
                     :current-page="pageIndex"
                     :page-size="pageSize"
                     :total="total"
                     style="padding: 30px 0; text-align: center;"
                     layout="total, prev, pager, next, jumper"
                     @current-change="listPage"
                   />
     <!-- 添加窗体 -->
     <!-- 修改窗体 -->
     <el-dialog
            title="添加/修改用户窗体" :visible.sync="dialogVisible" width="65%">
              <el-form ref="form" :model="addForm" label-width="120px">
                <el-form-item label="序号">
                  <el-input v-model="addForm.id"></el-input>
                </el-form-item>
                  <el-form-item label="姓名">
                    <el-input type="name" v-model="addForm.name"></el-input>
                   </el-form-item>
                   <el-form-item label="电话">
                     <el-input type="tel" v-model="addForm.tel"></el-input>
                   </el-form-item>
                   <el-form-item label="地址">
                     <el-input type="address" v-model="addForm.address"></el-input>
                   </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="addForm.desc"></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveAddForm">确 定</el-button>
                  </span>
                </el-dialog>

  </div>
</template>

<script>
  export default {
    name: 'index',
    data(){
      return {
       // mytext:"",
                pageIndex: 1, //当前第几页
        pageSize: 10, //每页显示10条记录
        total: 12, //总记录

        dialogVisible:false,

        addForm:{
          id:'',
          name:'',
          tel:'',
          address:'',
          desc:''
        },
        //条件查询
     mytext:{
          name: '',
          tel: ''
        },
        //表格数据
        tableData:[
          {
            id: 1,
            name: '武磊',
            tel: '18812345678',
            address: '河南省新乡市牧野区河南师范大学5号宿舍楼',
            desc:''
          },
          {
            id: 2,
            name: '王上源',
            tel: '18812344321',
            address: '河南省新乡市经开区河南师范大学平原湖校区5号宿舍楼',
             desc:''
          },
          {
            id: 3,
            name: '杨帅',
            tel: '1382923456',
            address: '河南省新乡市牧野区河南师范大学东寓2',
             desc:''
          },
          {
            id: 4,
            name: '蒋光太',
            tel: '13612345678',
            address: '河南省郑州市金水区金盾花园小区3号楼一单元504室',
             desc:''
          }
        ]
      }
    },
    methods: {
      //分页查询方法
      listPage(){},

      //提交添加数据
      saveAddForm(){
        this.tableData.push(this.addForm)
       // console.log(this.addForm)
        this.dialogVisible = false
      },
      //条件查询
      selectWhere(){
        console.log("input"+this.mytext)
        this.tableData=this.tableData.filter(item=>item.name.includes(this.mytext.name))
        this.tableData=this.tableData.filter(item=>item.tel.includes(this.mytext.tel))
      },
      del(id){
        this.tableData=this.tableData.filter((item)=>item.id!==id)
      },
      //添加
      add(){
        this.addForm={}
        this.dialogVisible = true
      },

      update(data){

        this.addForm.id=data.id
        this.addForm.name = data.name
        this.addForm.tel = data.tel
        this.addForm.address = data.address
        this.addForm.desc = data.desc

        this.dialogVisible=true
      },
    }
  }
</script>

<style>
</style>
